<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100%;
      height: 100vh;
    }
    .box {
      height: 20px;
      width: 20px;
      background-color: red;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
    }
  </style>
  <body>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=973c31822203d5d7e813bb2903afd5fe&plugin=AMap.MarkerClusterer"
    ></script>
    <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
    <div id="container"></div>
    <script>
      var cluster,
        markers = [];

      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [105, 34],
        zoom: 4,
      });
      console.log(points);
      for (var i = 0; i < points.length; i += 1) {
        markers.push(
          new AMap.Marker({
            position: points[i]["lnglat"],
            content:
              '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            offset: new AMap.Pixel(-15, -15),
          })
        );
      }

      var count = markers.length;
      addCluster();
      function addCluster() {
        //默认样式
        cluster = new AMap.MarkerClusterer(map, markers, { gridSize: 50 });
      }
    </script>
  </body>
</html>
